<!--
 * @Author: Christion.Young
 * @Date: 2020-11-24 15:53:58
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-01-06 17:25:39
 * @FilePath: \vprisk10.14\src\views\PublicManage\publicManage\financialInstrument\financialITDefinition\fieldInformationCom.vue
 * @Description: 查看模板
-->

<!-- 查看模板 -->
<template>
  <div class="dataAssociation">
    <el-row>
      <el-col style="margin-bottom: 10px;">
        <div
          style="display:flex;justify-content:space-between;height:32px;margin-bottom:10px;"
        >
          <!-- 左侧按钮 -->
          <div>
            <el-badge :is-dot="haveSearchText">
              <el-button @click="searchBtn">搜索</el-button>
            </el-badge>
            <!-- 为了对齐两个都套个badge -->
            <el-badge :is-dot="false">
            <el-button @click="clearSearch" style="margin:0 0 0 10px">重置</el-button>
            </el-badge>

          </div>
          <!-- 右侧按钮 -->
          <div></div>
        </div>

        <!-- 列表 -->
        <el-table ref="multipleTable" :data="tableData" height="400px" stripe>
          <el-table-column prop="columnEn" label="数据库字段" show-overflow-tooltip >
          </el-table-column>
          <el-table-column prop="columnCn" label="中文名称" show-overflow-tooltip > </el-table-column>
          <el-table-column prop="dataType" label="数据类型" show-overflow-tooltip > </el-table-column>
          <el-table-column prop="length" label="字段长度" show-overflow-tooltip > </el-table-column>
          <el-table-column prop="relatedDimensionCode" label="关联维度" show-overflow-tooltip >
          </el-table-column>
          <el-table-column
            prop="columnType"
            :formatter="columnTypeFormatter"
            label="字段类型"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            :formatter="statusFormatter"
            label="字段状态"
          >
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @refresh="searchFunc"
          :current-page="saveForm.page"
          :page-size="saveForm.size"
          :total="total"
        ></pagination>
      </el-col>
    </el-row>
    <!-- 搜索 -->
    <el-dialog
      v-dialogDrag
      append-to-body
      title="搜索"
      :visible.sync="searchDialog"
      width="700px"
      top="3%"
    >
      <el-form
        :model="saveForm"
        ref="addTreeForm"
        label-width="200px"
        label-position="right"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="数据库字段："
              style="width:500px;"
              prop="columnEn"
            >
              <el-input
                v-model="saveForm.columnEn"
                placeholder="请输入数据库字段"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="中文名称："
              style="width:500px;"
              prop="columnCn"
            >
              <el-input
                v-model="saveForm.columnCn"
                placeholder="请输入中文名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="字段类型："
              style="width:500px;"
              prop="dataType"
            >
              <el-select
                v-model="saveForm.columnType"
                style="width:100%"
                placeholder="请选择字段类型"
              >
                <el-option value="0" label="内置字段"></el-option>
                <el-option value="1" label="扩展字段"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="confirmTne">确 定</el-button>
        <el-button @click="cancelTne">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { publicManage_dat } from "@/api/index";
export default {
  props: {
    requiredParameter: {
      type: String,
      default: "",
      required: false
    }
  },
  data() {
    return {
      searchDialog: false,
      tableData: [],
      saveForm: {
        columnEn: "",
        columnCn: "",
        columnType: "",
        tableId: "",
        page: 1,
        size: 15
      },
      total: 0
    };
  },
  created() {},
  beforeMount() {},
  computed: {
    // 是否含有查询条件
    haveSearchText() {
      if (
        this.saveForm.columnEn ||
        this.saveForm.columnCn ||
        this.saveForm.columnType
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  watch: {
    requiredParameter() {
      this.saveForm.columnEn = "";
      this.saveForm.columnCn = "";
      this.saveForm.columnType = "";
      this.searchFunc;
    }
  },
  methods: {
    searchBtn() {
      this.searchDialog = true;
    },
    searchFunc() {
      if (this.requiredParameter) {
        this.saveForm.tableId = this.requiredParameter;
      }
      publicManage_dat.fundToolTableColumnQuery(this.saveForm).then(res => {
        if (res.code === 200) {
          this.tableData = res.datas.rows;
          this.total = res.datas.total;
          if (this.searchDialog === true) {
            this.searchDialog = false;
          }
        }
      });
    },
    //分页
    handleSizeChange(val) {
      this.saveForm.size = val;
      this.searchFunc();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.saveForm.page = val;
      this.searchFunc();
      console.log(`当前页: ${val}`);
    },
    // 重置
    clearSearch() {
      this.saveForm = {
        columnEn: "",
        columnCn: "",
        columnType: "",
        tableId: "",
        page: 1,
        size: 15
      };
      this.searchFunc();
    },
    //确定
    confirmTne() {
    this.saveForm.page = 1;
      this.searchFunc();
    },
    //取消
    cancelTne() {
      this.searchDialog = false;
    },
    //处理字段类型
    columnTypeFormatter(val) {
      let str = "";
      switch (val.columnType) {
        case "0":
          str = "内置字段";
          break;
        case "1":
          str = "扩展字段";
          break;
        default:
          break;
      }
      return str;
    },
    //处理字段状态
    statusFormatter(val) {
      let str = "";
      switch (val.status) {
        case "0":
          str = "停用";
          break;
        case "1":
          str = "启用";
          break;
        default:
          break;
      }
      return str;
    }
  }
};
</script>
